<template>
<div style="margin: 0 auto;width: 1200px;margin-top: 10px">
  <el-row>

    <!--左部名片 -->
    <el-col :span="16">

      <div style="display: flex;margin-top: 20px">
        <div style="display: flex;flex-direction: column">

          <el-row style="width: 700px">
            <el-col :span="4">
              <div style="display: flex">
                  <img style="margin-top: 5px" src="images/泡泡网.png">
              </div>
            </el-col>
            <el-col :span="16">
              <div style="
                     display: flex;flex-wrap:wrap;
                     flex-direction: column;
                     align-content: flex-start;
                     justify-content: space-evenly;
                     align-items: flex-start">
                <h1 style="font-size: 33px">{{ detailArr.username }}</h1>
                <p style="font-size: 16px;margin-top: 10px">{{ detailArr.gender }}·{{ detailArr.age }}岁·{{ detailArr.nation }}</p>
              </div>
            </el-col>
            <el-col :span="4">
              <h1 style="margin-top: 10px;font-size: 30px">面议</h1>
            </el-col>
          </el-row>
          <!--            -->
          <div style="margin-top: 10px; display: flex;margin-top: 40px">
            <el-tag style="font-size: 16px" type="info">个人</el-tag>
            <el-tag style="margin-left: 10px;font-size: 16px" type="info">{{ detailArr.seniority }}年工龄</el-tag>
            <el-tag style="margin-left: 10px;font-size: 16px" type="info">{{ detailArr.term }}</el-tag>
          </div>

          <div style="display: flex;font-size: 18px;font-weight: 400;line-height: 48px;flex-direction: column;">
            <div style="margin-top: 10px; display: flex">
              <span>工种</span>
              <span>:</span>
              <div v-for="item in detailArr.list">
                <p style="margin-right: 5px">{{ item.workName }}</p>
              </div>
            </div>

            <div style="margin-top: 10px; display: flex">
              <span>找活地区</span>
              <span>:</span>
              <div>
                <p>{{ detailArr.disworkName }}</p>
              </div>
            </div>

            <div style="margin-top: 10px; display: flex;position: relative;">
              <span>找活状态</span>
              <span>:</span>
              <div style="display: flex;">
                <p style="font-size: 20px;color: #0092FF;font-weight: bold;margin-left: 10px">{{detailArr.findId}}</p>
                <el-button style="position: absolute;left: 580px" type="primary">联系工人</el-button>
              </div>
            </div>


          </div>

          <div>
            <h3 style="display: flex">自我介绍</h3>
            <p style="margin-top: 10px;display: flex;margin-left: 20px">{{ detailArr.selfInfo }}</p>
          </div>

          <div style="margin-top: 30px">
            <h3 style="display: flex">项目经验</h3>
            <div v-for="item in detailArr.experienceVos">
              <div style="display: flex">
                <p style="color: #666666">{{item.startTime}}</p>
                <p style="color: #666666">{{item.endTime}}</p>
              </div>
              <div style="background-color: rgba(0,0,0,0.1);border-radius: 3px;color: black;text-align: left;margin-bottom: 20px">
                <p>{{item.introduction}}</p>
              </div>
            </div>
          </div>

          <div style="margin-top: 30px">
            <h3 style="display: flex">技能证书</h3>
            <div style="text-align: left" v-for="item in detailArr.skillsVos">
                <img :src='"http://localhost:8080/"+item.skill' width="150px">
            </div>
          </div>

          <div style="margin-top: 30px">
            <h3 style="display: flex">当前所在地</h3>
            <p style="margin-top: 10px;display: flex;margin-left: 20px">{{ detailArr.predistName+detailArr.indetail }}</p>

          </div>


        </div>
      </div>


    </el-col>

    <!--右部 -->
    <el-col :span="8">

      <!--登录注册 -->
      <div style="width: 400px;margin-top: 20px">
        <el-card style="display: flex">
          <el-form label-width="60px" style="margin-top: 10px;width: 300px;">
            <el-form-item label="用户名">
              <el-input placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item style="text-align: center">
              <el-button type="primary" style="position: relative;right: 20px;" @click="reg()">注册</el-button>
              <el-button type="primary" style="position: relative;right: 5px;" @click="login()">登录</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>

      <!--精选推荐人 -->
      <div style="margin-top: 20px">
        <el-card style="display: flex">
          <h3>精选工人推荐</h3>
        </el-card>
      </div>

      <!--精选推荐人名片-->
      <div v-for=" item in business">
        <div style="width: 400px;margin-top: 20px">
          <el-card style="display: flex">
            <!--            -->
            <el-row style="width: 300px">
              <el-col :span="6">
                <a href="javascript:void(0)" @click="detail(item.id)">
                  <img src="images/泡泡网.png" style="width: 80px">
                </a>
              </el-col>
              <el-col :span="18">
                <div style="display: flex;flex-wrap:wrap;
                     margin-left: 10px;
                     flex-direction: column;
                     align-content: flex-start;
                     justify-content: space-evenly;
                     align-items: flex-start">
                  <h3>{{ item.username }}</h3>
                  <p style="font-size: 6px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis">
                    {{ item.gender }}·{{ item.age }}岁·{{ item.nation }}·个人·{{ item.seniority }}年工龄·{{ item.industry }}
                  </p>
                </div>
              </el-col>

            </el-row>
            <!--            -->

            <div style="margin-top: 10px;
                     display: flex;flex-wrap:wrap;
                     flex-direction: column;
                     align-content: flex-start;
                     justify-content: space-evenly;
                     align-items: flex-start">
              <p style="margin-top: 5px;font-size: 6px">{{ item.workType }}</p>
              <p style="margin-top: 30px;"><i
                  class="el-icon-location-information"/>{{ item.province }}{{ item.address }}贵阳大方县。。。。。。。。。</p>
            </div>


          </el-card>
        </div>
      </div>


    </el-col>


  </el-row>
</div>
</template>

<script>
export default {
  name: "DetailView",
  data() {
    return {
      business: [{
        username: "",
        gender: "",
        age: "",
        nation: "",
        seniority: "",
        industry: "",
        workType: "",
        selfInfo: "",
        province: "",
        address: ""
      }],
      detailArr: {
        username: "",
        imgUrl:"",
        proficiency:"",
        salary:"",
        gender: "",
        age: "",
        nation: "",
        seniority: "",
        findId:"",
        list:[],
        experienceVos:[],
        skillsVos:[],
        selfInfo:"",
        disworkName:"",
        predistName:"",
        indetail:"",
        term:""
      }
    }
  },
  methods: {
    handleChange() {
      this.axios.get('http://localhost:8080/v1/workers/list')
          .then((response) => {
            if (response.data.code == 1) {
              let butemp= response.data.data;
              for (let i=0;i<butemp.length;i++) {
                if (butemp[i].gender==true){
                  butemp[i].gender='男'
                }else{
                  butemp[i].gender='女'
                }
              }
              this.business=butemp;
            }
          })
    },


  },
  mounted() {
    this.handleChange();

    let id = new URLSearchParams(location.search).get('id');
    this.axios.get('http://localhost:8080/v1/workers/'+id+'/detail')
        .then((response)=>{
          if (response.data.code==1){
            this.detailArr =response.data.data;
            if (this.detailArr.gender==true){
              this.detailArr.gender='男';
            }else{
              this.detailArr.gender='女';
            }
            if (this.detailArr.findId==true){
              this.detailArr.findId='找活中';
            }else{
              this.detailArr.findId='已找到';
            }
          }
        })
  }
}


</script>

<style scoped>

</style>